<template>
    <div>
        <van-form ref="form">
            <van-field name="rate" label="包装评分" required :rules=rules.packScore>
                <template #input>
                    <van-rate v-model="formData.packScore" />
                </template>
            </van-field>
            <van-field name="rate" label="餐准评分" required :rules=rules.distributionScore>
                <template #input>
                    <van-rate v-model="formData.distributionScore" />
                </template>
            </van-field>
            <van-field name="rate" label="味道评分" required :rules=rules.tasteScore>
                <template #input>
                    <van-rate v-model="formData.tasteScore" />
                </template>
            </van-field>
            <van-field v-model="formData.commentContent" rows="5" name="评价内容" label="评价内容" type="textarea" maxlength="512" placeholder="请输入评价内容" show-word-limit :rules=rules.commentContent />
            <van-field name="uploader" label="评价附件">
                <template #input>
                    <uploadCom ref="uploadRef" :maxNumber="6" @uploadFileIds="uploadFileIds" accept=".jpg,.jpeg,.png,.mp4"></uploadCom>
                </template>
            </van-field>
            <h5>
                食堂评分：<span>{{formData.canteenName}}</span>
            </h5>
            <van-field name="rate" label="服务态度">
                <template #input>
                    <van-rate v-model="formData.serviceAttitudeScore" />
                </template>
            </van-field>
            <van-field name="rate" label="环境卫生">
                <template #input>
                    <van-rate v-model="formData.environmentHygieneScore" />
                </template>
            </van-field>
        </van-form>
        <full-loading v-if="loading"></full-loading>
    </div>
</template>

<script>
    import { setOrderComment } from '@/api/srvAssurance/smarcatering/myOrder';
    export default {
        data () {
            return {
                formData: {
                    orderId: '',
                    packScore: 1, // 包装评分
                    distributionScore: 1, // 餐准评分
                    tasteScore: 1, // 味道评分
                    commentContent: '', // 评论内容
                    canteenId: '',
                    canteenName: '',
                    serviceAttitudeScore: 0, // 服务态度
                    environmentHygieneScore: 0, // 环境卫生
                    listFileCode: []
                },
                rules: {
                    packScore: [
                        { required: true, type: 'number', message: '请选择包装评分', trigger: 'onChange' }
                    ],
                    distributionScore: [
                        { required: true, type: 'number', message: '请选择餐准评分', trigger: 'onChange' }
                    ],
                    tasteScore: [
                        { required: true, type: 'number', message: '请选择味道评分', trigger: 'onChange' }
                    ],
                    commentContent: [
                        { pattern: this.$commonReg.textAreaReg, message: this.$commonReg.textAreaMsg, trigger: 'onBlur' }
                    ]
                },
                loading: false
            }
        },
        methods: {
            // 保存
            handleSave () {
                this.$refs.form.validate().then(() => {
                    let formData = {
                        orderId: this.formData.orderId,
                        packScore: this.formData.packScore || '',
                        distributionScore: this.formData.distributionScore || '',
                        tasteScore: this.formData.tasteScore || '',
                        commentContent: this.formData.commentContent,
                        listFileCode: this.formData.listFileCode,
                        serviceAttitudeScore: this.formData.serviceAttitudeScore || '',
                        environmentHygieneScore: this.formData.environmentHygieneScore || ''
                    }
                    if (this.formData.serviceAttitudeScore || this.formData.environmentHygieneScore) {
                        formData.canteenId = this.formData.canteenId;
                    }
                    this.loading = true;
                    setOrderComment(formData).then(res => {
                        this.loading = false;
                        if (res.code === 1000) {
                            this.$Notify({ type: 'success', message: '评价成功！' });
                            this.$emit('close');
                            this.$emit('refresh');
                        }
                    }).catch(() => {
                        this.loading = false;
                    })
                })
            },
            getData (item) {
                this.formData.orderId = item.orderId;
                this.formData.canteenId = item.canteenId;
                this.formData.canteenName = item.canteenName;
            },
            // 附件上传
            uploadFileIds (arr) {
                this.formData.listFileCode = arr;
            },
            // 重置表单
            resetForm () {
                setTimeout(() => {
                    this.$refs.form.resetValidation();
                })
                this.formData = {
                    orderId: '',
                    packScore: 1, // 包装评分
                    distributionScore: 1, // 餐准评分
                    tasteScore: 1, // 味道评分
                    commentContent: '', // 评论内容
                    canteenId: '',
                    canteenName: '',
                    serviceAttitudeScore: 0, // 服务态度
                    environmentHygieneScore: 0, // 环境卫生
                    listFileCode: []
                }
                this.$refs.uploadRef.reset();
                this.loading = false;
            }
        }
    }
</script>

<style scoped lang='less'>
    h5 {
        font-size: 13px;
        text-indent: 1em;
        line-height: 35px;
        span {
            font-weight: normal;
            font-size: 12px;
        }
    }
</style>
